<template>
	<view>
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400" class='car_swiper'>
				<swiper-item class="swiper-item" v-for="item in imgList">
					<view class="image-wrapper">
					<image :src="item" class="loaded"  mode="aspectFill" ></image> 
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- <view class='commodityPic'>
			<image class='commodityPic_img' src='../../static/sh_pic.png' mode="aspectFill"></image>
		</view> -->
		
		<view class='commodity'>
			<view class='commodity_price'>
				<text class='DW_commodity_price'>￥</text>
				<text class='JG_commodity_price'>{{sellPrice}}</text>
				<view class='store_share'>
					<image class='share_img' src='../../../static/images/share.png'>
					<text class='share_con'>分享</text>
				</view>
			</view>
			<view class='commodity_title'>{{commodityName}}</view>
			<view class='commodity_SalesVolume'>
				<text>总销量：</text>
				<text>{{sellVolume}}</text>
			</view>
		</view>
		
		<!-- <view class='commodityDetails'>
			<view class='title_commodityDetails'>商品详情</view>
		</view> -->
		
		<view class='purchase'>
			<view class='btn_purchase pingtuan' @tap="enterassemble()">发起拼团</view>
			<view class='btn_purchase' @tap="enterOrderConfirm()">立即购买</view>
		</view>
	</view>
</template>

<script>
	import md5 from '../../../common/md5.js'
	import http from '../../../common/http.js'
	import common from '../../../common/common.js'
	import config from '../../../common/config.js'
	 export default {
	   components: {
	   			
	   		},
		data() {
			return {
				storeId:"",
				commodityId:"",
				storeName:"",//店铺名
				sellPrice:"",//售价
				inviteCode:"",//邀请码
				commodityName:"",//商品名
				sellVolume:0,//总销量
				groupGoods:"",//拼团人数
				logoBig:"",//产品大图
				logoSmall:"",//产品小图
				ssembleaType:1,//1:拼团购物；2:拼团返利
				orderId:2,//拼团类型=2，此字段必填
				imgList: [],
				
		    }
	     },
		 onLoad(option) {
			 this.storeId =option.storeId;//店铺id
			 this.commodityId=option.commodityId;//商品id 
			 this.storeName =option.storeName;//店铺名称
		 },
		methods:{
			enterOrderConfirm() {//立即购买
				uni.navigateTo({
					url:'../orderComfirm/orderComfirm?storeId='+this.storeId+'&commodityId='+this.commodityId+'&inviteCode='+this.inviteCode+'&quantity=1&logoSmall='+this.logoSmall+'&commodityName='+this.commodityName+'&sellPrice='+this.sellPrice+'&storeName='+this.storeName+''
				})
			},
			enterassemble(){//发起拼团
				uni.navigateTo({
					url:'../orderComfirm/orderComfirm?storeId='+this.storeId+'&commodityId='+this.commodityId+'&type='+this.ssembleaType+'&orderId='+this.orderId+'&quantity=1&logoSmall='+this.logoSmall+'&commodityName='+this.commodityName+'&sellPrice='+this.sellPrice+'&storeName='+this.storeName+''
				})
			},
			getcommodityInfo(){//获取商品详情
				var that =this;
				let params = {
						appid:common.appid,
						api_version:common.apiversion,
						timestamp:common.timesTamp,
						token:uni.getStorageSync("userToken"),
						shop_id:this.storeId,
						id:this.commodityId,
					};
				   let signStr = common.sign(params);
				   params.sign = signStr;
					 uni.request({
						 url:config.assembleUrl+'group/goods/detail', //仅为示例，并非真实接口地址。
						 method:"POST",
						 header:{
							 'content-type':'application/x-www-form-urlencoded',
							  },
						data: params,
						 success: function (res) {
							
							var datas =res.data.data;
							that.sellPrice =datas.sell_price;//售价
							that.commodityName =datas.name; //商品名
							that.sellVolume =datas.sell_volume;//总销量
							that.groupGoods =datas.groupGoods;//拼团人数
							that.imgList =that.imgList.concat(datas.logo.thumb_url_big); //产品大图
							that.logoSmall =datas.logo.thumb_url;//产品小图 
						 }
					 });
			},
			
		},
		mounted() {
			 this.getcommodityInfo();//获取商品详情
		}
	  }
	   </script>

<style>
	 .carousel {
		height:866upx;
		position:relative;
	}
	.car_swiper{
		height: 100%;
	}
	.image-wrapper{
		width: 100%;
		height: 100%;
		
	}
	.loaded{
		height: 100%;
		width:100%;
	}
	.commodity{
		width:100%;
		height:auto;
		float:left;
		background:#fff;
	}
	.commodityPic{
		width:100%;
		height:432px;
		float:left;
	}
	.swiper-item {
		display: flex;
		justify-content: center;
		align-content: center;
		height: 750upx;
		overflow: hidden;
		
	}
	.swiper-item image {
			width: 100%;
			height: 100%;
		}
	.commodityPic_img{
		width:100%;
		height:100%;
		float:left;
	}
	.commodity{
		width:100%;
		height:auto;
		float:left;
	}
	.commodity_price{
		width:100%;
		height:40px;
		line-height:40px;
		float:left;
		padding-left:3%;
		color:#ff4000;
	}
	.DW_commodity_price{
		font-size:0.9em;
	}
	.JG_commodity_price{
		font-size:1.25em;
		font-weight:600;
	}
	.store_share{
		width:auto;
		height:24px;
		float:right;
		margin-right:40upx;
		margin-top:8px;
	}
	.share_img{
		width:18px;
		height:18px;
		float:left;
		margin-top:3px;
	}
	.share_con{
		width:auto;
		height:24px;
		line-height:24px;
		float:left;
		color:#979797;
	}
	.commodity_title{
		width:94%;
		line-height:22px;
		margin-left:3%;
		font-size:1.1em;
		font-weight: 600;
		color:#222;
	}
	.commodity_SalesVolume{
		width:94%;
		height:30px;
		line-height:30px;
		float:left;
		font-size:0.9em;
		color:#9c9c9c;
		padding:0 3% 0 3%;
	}
	.commodityDetails{
		width:100%;
		height:auto;
		float:left;
	}
	.title_commodityDetails{
		width:94%;
		height:30px;
		line-height:30px;
		float:left;
		
	}
	.purchase{
		height:56px;
		width:94%;
		position:fixed;
		bottom:0px;
		left:0px;
		background:#fff;
		font-size:1.1em;
		padding:0 3%;
		box-shadow: 0 1px 5px #ccc;
	}
	.btn_purchase{
		width:50%;
		height:46px;
		float:left;
		margin-top:5px;
		background:#fb5942;
		text-align: center;
		line-height:46px;
		color:#fff;
	}
	.pingtuan{
		background:#1a191e;
	} 
</style>
